function Carousel(el, {}) {

    this.el=document.querySelector(el)
    this.num=1

    this.t=null
    // 启动插件
    this.init()
}

Carousel.prototype.init=function(){
    // 切换图片
    this.changeImg()
    // 将圆圈进行同步
    this.SynchronousCircle()
    // 圆圈的移入移出功能
    this.circleOverOut()
}



// 图片
Carousel.prototype.changeImg=function(){
    this.t=setInterval(()=>{
        this.num++
        // 图片只有六张
        if(this.num>=7) this.num=1
       // 获取img标签
        let imgObj=this.el.querySelector('img')
        // 修改标签的src属性，显示多张照片
        imgObj.src=`./imgs/img${this.num}.jpg`
        // 同步圆圈
        this.SynchronousCircle()
    },1000)
}




// 同步圆圈
Carousel.prototype.SynchronousCircle=function(){
    // 获取所有ol 里面的li标签
let liObjs=this.el.querySelectorAll('li')
// 清除所有li的className
liObjs.forEach((item,index)=>{
    item.className=''
})
// 给当前的li标签加上className
liObjs[this.num-1].className='active'

}



Carousel.prototype.circleOverOut=function(){
    // 获取所有的li标签
    let liObjs=this.el.querySelectorAll('li')
    // 遍历所有的li标签
    liObjs.forEach((item,index)=>{
        // 绑定鼠标移入事件
        item.onmouseover=()=>{
            // 清除定时器
            clearInterval(this.t)
            //  让图片保持一致
            this.el.querySelector('img').src=`./imgs/img${(index+1)}.jpg`
            // 获取所有的li标签
            let liObjs=this.el.querySelectorAll('li')
            liObjs.forEach(item =>{
                item.className=''
            })
            liObjs[index].className='active'
            this.num=index
        }
        item.onmouseout=()=>{
            this.changeImg()
        }
    })
}